<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>登录页面</h1>
  用户名：<input type="text" id="username">
  <br>
  密码：<input type="text" id="password">
  <br>
  <button id="login">登录</button>
  <script>
    // 原生ajax 的 get传参 


    // 登录接口
    // 请求地址    http://127.0.0.1:3000/user/login 
    // 请求方式   get 
    // 发送的数据
    // userName 用户名
    // password 密码
    //返回的数据
    // obj   success  登录成功
    //         err     失败原因

    var loginbtn = document.getElementById("login");
    var userName = document.getElementById("username");
    var passwrod = document.getElementById("password");

    loginbtn.onclick = function () {
      var userVal = userName.value;//用户名输入框的值
      var passVal = passwrod.value;//密码框的值

      // 1.创建对象
      var xhr = new XMLHttpRequest();
      // 2.调用open方法
      var url = `http://127.0.0.1:3000/user/login?userName=${userVal}&password=${passVal}`
      xhr.open("get", url, true)
      // 3.调用send
      xhr.send()
      // 4.等待数据返回
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
          var res = JSON.parse(xhr.responseText)
          console.log(res)
          if (res.success) {
            alert("登录成功")
          }
          if (res.err) {
            alert(res.err)
          }
        }
      }
    }






  </script>
</body>

</html>